<template>
    <div class="studentApprove">
         <div class="topIntroduce">
            <img src="../../assets/学生认证_52.png" alt="">
            <span>学生认证</span>
        </div>
        <div class="upload">
            <span>上传照片:</span>
            <span>上传学生证照</span>
            <div class="imageText">
                <div class="file-bgi">
                   <img class="coverImg" v-bind:src="fileImg"  alt="">
                   <input type="file" title=" " class="img-upload" @change="uploadToQiniu" accept="image/gif,image/jpeg,image/jpg,image/png" ref="file">
                </div>  
            </div>
            <p>请提交证明您是学生的照片，例如学生证、在读证明（需包含照片、姓名、印章等有效证件）</p>
        </div>
        <el-button type="primary" round>提交</el-button>
    </div>
</template>

<script>
export default {
  data() {
    return {
      fileImg: "",
      imgFile: ""
    };
  },

  methods: {
    uploadToQiniu() {
      // var fileImgUrl = '/lifetime/video/get_token'
      // this.$http.get(fileImgUrl).then((data) =>{
      // 	var token = data.body.data;
      let file = this.$refs.file.files[0];
      this.imgFile = this.$refs.file.files[0];
      var fd = new FormData();
      fd.append("file", file);
      var Url = this.utils.UP_IMAGE;
      if (file) {
        this.utils.$post(
          Url,
          data => {
            if (data) {
              this.fileImg = data.data;
              this.notify();
            }
          },
          fd
        );
      }
    },
    // 发送图片
    notify() {
      this.$emit("setImageUrl", this.fileImg, this.imgFile);
    }
  },
  watch: {
    init(newVal) {
      this.fileImg = newVal;
    }
  }
};
</script>


<style lang="less">
.studentApprove {
  padding: 40px;
  .topIntroduce {
    > img {
      vertical-align: middle;
      padding-right: 8px;
    }
    > span {
      font-size: 18px;
      color: #232323;
      font-weight: bold;
    }
  }
  .upload {
    margin-top: 40px;
    > span:nth-child(1) {
      font-size: 14px;
      color: #999999;
    }
     > span:nth-child(2){
        font-size: 18px;
        color: #333333;
        font-weight: 600;
        //   text-align: center;
        margin-bottom: 12px;
        margin-left: 92px;
      }
    .imageText {
       margin-top: 20px;
       .file-bgi {
        margin-left: 86px;
        width: 300px;
        height: 200px;
        background: url("../../assets/上传证书.png") no-repeat center;
        .coverImg {
          // position: absolute;
          border: none;
          top: 0px;
          width: 100%;
          height: 100%;
        }
        .img-upload {
          width: 100%;
          height: 100%;
          opacity: 0;
        }
      }
    }
     > p{
        font-size: 14px;
        color: #999999;
        margin-left: 86px;
        margin-top: 20px;
        display: inline-block;
      }
  }
  //  提交按钮
  .el-button--primary {
    width: 240px;
    height: 40px;
    margin-top: 100px;
    font-size: 14px;
    color: #ffffff;
    border-radius: 40px;
    margin-bottom: 60px;
    margin-left: 264px;
  }
}
</style>

